<template>
  <div class="login-container">
    <div class="header-wrap">
      <span class="goback" @click="loginback"></span>
      <span class="text-header">京东登录</span>
    </div>
    <div class="login-content">
      <div class="login-page">
        <div class="user-login">
          <div class="input-container">
            <form>
              <input id="username" type="text" v-model="usernamecont" placeholder="用户名/邮箱/已验证手机"  @click="usernamefocus"/>
            </form>
            <div class="inputdelete" @click="usernamecontclick" v-if="usernamedeleteshowup"></div>
          </div>
          <div class="input-container">
            <form>
              <input
                id="password"
                :type="activepasswordtype"
                v-model="passwordcont"
                placeholder="请输入密码"
                autocomplete="new-password"
                @click="passwordfocusclick"
              />
              <div class="passworddelete" @click="passwordcontclick" v-if="passworddeleteshowup"></div>
            </form>
            <label class="label-checkbox">
              <div
                :class="checkbtncssflag==true?'checkbtn':'checkbtnshow'"
                @click="passwordeyeclick"
              ></div>
            </label>
            <button class="findpwd">忘记密码</button>
          </div>
        </div>
        <div class="cut-space">&nbsp;</div>
        <div class="login-btn" @click="tocart">登 录</div>
        <div class="quicklogin-btn">一键登录</div>
        <div class="text-register">
          <div class="planblogin">
            <span class="txt-planblogin">短信验证码登录</span>
          </div>
          <div class="quickreg">
            <span class="txt-quickreg">手机快速注册</span>
          </div>
        </div>
        <div class="login-type">
          <div class="quick-login">
            <div class="otherlogin">其他登录方式</div>
            <div class="qqlogin">
              <div class="qqlogo"></div>
              <span class="txt-qq">QQ</span>
            </div>
            <div class="wclogin">
              <div class="wclogo"></div>
              <span class="txt-wc">微信</span>
            </div>
          </div>
          <div class="agrement">
            <p>
              登录即代表您已同意
              <span class="secret">京东隐私政策</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../store/index.js";
export default {
  store: store,
  name: "login",
  data() {
    return {
      usernamecont: "",
      passwordcont: "",
      usernamedeleteshowup:false,
      passworddeleteshowup:false
    };
  },
  methods: {
    loginback() {
      this.$router.go(-1);
    },
    tocart() {
      this.$router.push("/cart");
      this.$store.commit("haslogin")
    },
    passwordeyeclick() {
      this.$store.commit("eyetab");
    },
    usernamecontclick() {
      this.usernamecont = "";
      this.usernamedeleteshowup=false
    },
    passwordcontclick() {
      this.passwordcont = "";
      this.passworddeleteshowup=false
    },
    usernamefocus(){
      this.passworddeleteshowup=false
        this.usernamedeleteshowup=true
    },
    passwordfocusclick(){
      this.usernamedeleteshowup=false
       this.passworddeleteshowup=true
    }
  },
  computed: {
    checkbtncssflag() {
      return this.$store.state.checkbtncssflag;
    },
    activepasswordtype() {
      return this.$store.state.activepasswordtype;
    }
  }
};
</script>

<style scoped>
.passworddelete {
  background-image: url("../../../public/images/deleteX.png");
  width: 24px;
  height: 24px;
  overflow: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
  top: 13px;
  right: 120px;
}
.inputdelete {
  background-image: url("../../../public/images/deleteX.png");
  width: 24px;
  height: 24px;
  overflow: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
  top: 13px;
  right: 0;
}
.login-container {
  width: 100%;
  height: 100%;
  line-height: 1.5;
}
.header-wrap {
  position: relative;
  height: 44px;
  line-height: 44px;
  background: #fff;
  font-size: 17px;
  z-index: 999;
  text-align: center;
  vertical-align: baseline;
  color: #222;
}
.goback {
  top: 10px;
  left: 20px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  display: block;
  position: absolute;
  background-image: url("../../../public/images/back.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.login-content {
  width: 100%;
  background: #fff;
  padding: 0 25px 25px;
  vertical-align: baseline;
  font-size: 16px;
}
.login-page {
  margin: 0 auto;
}
.input-container {
  height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  background: #fff;
  border-bottom: 1px solid #efefef;
}
#username {
  font-size: 16px;
  width: 100%;
  padding: 0 30px 0 0;
  height: 100%;
  color: rgba(34, 34, 34, 0.8);
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  background-color: white;
  cursor: text;
  border: 0px;
}
#password {
  font-size: 16px;
  width: 100%;
  padding: 0 150px 0 0;
  height: 100%;
  color: rgba(34, 34, 34, 0.8);
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  background-color: white;
  cursor: text;
  border: 0px;
}
.label-checkbox {
  position: absolute;
  right: 90px;
  top: 13px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  z-index: 99;
}
.checkbtn {
  position: relative;
  width: 24px;
  height: 24px;
  background-image: url("../../../public/images/password.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.checkbtnshow {
  position: relative;
  width: 24px;
  height: 24px;
  background-image: url("../../../public/images/passwordeye.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.findpwd {
  position: absolute;
  height: 23px;
  line-height: 24px;
  right: 0;
  top: 12.5px;
  background-color: #fff;
  color: #222;
  font-size: 14px;
  border: 0;
  outline: 0;
  border-radius: 2px;
  text-align: center;
  padding-left: 16px;
  border-left: 1px solid #ccc;
  box-shadow: none;
  cursor: pointer;
}
.cut-space {
  font-size: 14px;
  line-height: 30px;
  color: #f23030;
  min-height: 15px;
  text-align: left;
}
.login-btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: block;
  background-color: #efefef;
  border-radius: 25px;
  font-size: 16px;
  color: #fff;
  background-image: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
  text-align: center;
}
.quicklogin-btn {
  border: 1px solid #ff2000;
  color: #f10000;
  background: #fff;
  margin-top: 10px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  font-size: 16px;
  text-align: center;
}
.text-register {
  margin-top: 20px;
  text-align: center;
}
.planblogin {
  float: left;
  color: #999;
  line-height: 22px;
}
.quickreg {
  float: right;
  color: #999;
  line-height: 22px;
}
.txt-planblogin {
  font-size: 14px;
}
.txt-quickreg {
  font-size: 14px;
}
.login-type {
  margin-top: 132px;
  position: relative;
}
.quick-login {
  height: 105.5px;
  position: relative;
  padding: 24.5px 0 0;
  border-top: 1px solid #efefef;
  text-align: center;
}
.agrement {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #bebebe;
}
.secret {
  color: #409eff;
}
.otherlogin {
  font-size: 12px;
  font-weight: 400;
  position: absolute;
  top: -14px;
  left: 34%;
  background-color: #fff;
  padding: 5px 15px;
  color: #ccc;
  line-height: 1.5;
}
.qqlogin {
  position: absolute;
  left: 84.5px;
  top: 24.5px;
  width: 48px;
  height: 48px;
  color: #616161;
  margin: 0 15px;
  font-size: 14px;
}
.qqlogo {
  background-image: url("../../../public/images/QQ.png");
  width: 48px;
  height: 48px;
  overflow: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.txt-qq {
  position: absolute;
  bottom: -23px;
  left: 0;
  display: inline-block;
  width: 48px;
  text-align: center;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}
.wclogin {
  position: absolute;
  right: 84.5px;
  top: 24.5px;
  width: 48px;
  height: 48px;
  color: #616161;
  margin: 0 15px;
  font-size: 14px;
}
.wclogo {
  background-image: url("../../../public/images/weixin.png");
  width: 48px;
  height: 48px;
  overflow: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.txt-wc {
  position: absolute;
  bottom: -23px;
  left: 0;
  display: inline-block;
  width: 48px;
  text-align: center;
  color: #999;
  font-size: 12px;
}
input {
  outline: none;
}
</style>